<%@page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Error</title>

    <style>
        body{margin:0;padding:0;background:#222;font-size:12px;overflow:auto}
        #code{ display: none;width:280px;height:400px;margin:50px auto 0;color:#fff;font-family:"Times New Roman","arial","Bitstream Vera Sans Mono","Courier New","sans-serif";font-size:60px; line-height: 200%;}
        *{ transition: all 0.5s; -webkit-transition: all 0.5s;}
        #code .num,#code .size{ font-weight: bold; letter-spacing: 10px;}
        #code .num1{ padding-left: 50px; }
        #code .size{ color: #FFBE33; position: relative;}
        #code .sym{ color: #666; }
        #code .line{ display: inline-block; width: 260px; height: 2px; background-color: #fff; line-height: 0; font-size: 0; }
        /*#code .tit{ display:block; text-align: center; position: relative; top: -200px; font-size: 100px;}*/

        .tip{ display: none; text-align: center; font-size: 24px; color: #fff; line-height: 200%;font-family:"Times New Roman"; letter-spacing: 2px;}
        .tip span{ position: relative; }
        .tip2 .sp3{ left: -200px; color: #ccc;}
        .tip2 .sp4{ right: -200px; color: #FFBE33; cursor: pointer; font-size: 30px; padding-left: 20px; font-family: "华文行楷"}
        .tip3{ position: relative; bottom: -200px; padding-top: 20px; font-size: 14px; color: #ccc; opacity: 0;}
    </style>

</head>

<body>

<div id="code">
    <span class="num num1 move">200</span><br>
    <span class="sym move">+</span>
    <span class="num move">200</span><br>
    <span class="line move"></span><br>
    <span class="sym move">=</span>
    <span class="size">Error</span>
</div>

<div class="tip tip1">
    <span class="sp1">很抱歉 这里出了状况！</span>
</div>
<div class="tip tip2">
    <span class="sp3">点击</span>
    <span class="sp4" onclick="javascript:window.parent.location.href='<%=request.getContextPath()%>/index'">返回首页</span>
</div>
<div class="tip tip3"></div>
<script type="text/javascript" src="<%=request.getContextPath()%>/bootstrap/js/jquery.min.js"></script>
<script type="text/javascript">
    (function($) {
        $.fn.typewriter = function() {
            this.each(function() {
                var $ele = $(this), str = $ele.html(), progress = 0;
                $ele.html('');
                var timer = setInterval(function() {
                    var current = str.substr(progress, 1);
                    if (current == '<') {
                        progress = str.indexOf('>', progress) + 1;
                    } else {
                        progress++;
                    }
                    $ele.html(str.substring(0, progress) + (progress & 1 ? '|' : ''));
                    if (progress >= str.length) {
                        clearInterval(timer);
                    }
                }, 20);
            });
            return this;
        };
    })(jQuery);

    $(function(){
        $("#code").typewriter().show();

        //获取当前时间
        function p(s) {
            return s < 10 ? '0' + s: s;
        }
        var myDate = new Date();
        //获取当前年
        var year=myDate.getFullYear();
        //获取当前月
        var month=myDate.getMonth()+1;
        //获取当前日
        var date=myDate.getDate();
        var h=myDate.getHours();       //获取当前小时数(0-23)
        var m=myDate.getMinutes();     //获取当前分钟数(0-59)
        var s=myDate.getSeconds();

        var now=year+'-'+p(month)+"-"+p(date)+" "+p(h)+':'+p(m)+":"+p(s);

        //console.log(now)
        $(".tip3").html(now);

        //敲完后执行
        setTimeout(function(){
            $("body").css({"background-color":"rgba(0,0,0,0.5)"});
            $(".move").hide();
            $(".size").animate({"top":"-200px","font-size":"100px","padding-left":"5px"},500);
            $(".tip").delay(800).fadeIn(800);
            $(".sp3").delay(1000).animate({"left":0},500);
            $(".sp4").delay(1000).animate({"right":0},500);
            $(".tip3").delay(100).animate({"bottom":0,"opacity":1},300);

        },3000)


    })
</script>

</body>
</html>
